<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script type="text/javascript" src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> <section class="gallery-section"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-12"> <div class="title-gallery"> <h3> Our Picture <br> Gallery</h3> <p>Short one liner description about the section</p> </div> <div class="filters filter-button-group"> <ul class="tabs"> <li class="active" data-filter="*"> <img src="https://i.ibb.co/8mY7SgC/singing.png" alt=""> <span> All </span> </li> <li data-filter=".dance"> <img src="https://i.ibb.co/PzcJ0Ly/dance.png" alt=""> <span> Dance </span> </li> <li data-filter=".music"> <img src="https://i.ibb.co/h293fT9/music.png" alt=""> <span> Music </span> </li> <li data-filter=".art"> <img src="https://i.ibb.co/KGcH3nB/art.png" alt=""> <span> Art </span> </li> <li data-filter=".theatre"> <img src="https://i.ibb.co/sCnqrZQ/theater.png" alt=""> <span> Theatre </span> </li> <li data-filter=".drama"><img src="https://i.ibb.co/9yQNYw5/drama.png" alt=""> <span> Drama </span> </li> <li data-filter=".singing"><img src="https://i.ibb.co/8mY7SgC/singing.png" alt=""> <span> Singing </span> </li> </ul> <a href="#" class="view-button"> View Gallery > </a> </div> </div> <div class="col-lg-8 col-md-12"> <div class="gallery-filter-box"> <ul class="list-inline grid"> <li class="music grid-item"> <img src="https://i.ibb.co/stJgJCR/img-7.png" alt=""></li> <li class="drama grid-item"> <img src="https://i.ibb.co/d4JykrM/img-9.png" alt=""></li> <li class="art grid-item"> <img src="https://i.ibb.co/X7Ffk74/img-4.png" alt=""></li> <li class="dance grid-item"> <img src="https://i.ibb.co/59HSXQ2/img-5.png" alt=""></li> <li class="singing grid-item"> <img src="https://i.ibb.co/0h8HDs9/img-6.png" alt=""></li> <li class="music grid-item"> <img src="https://i.ibb.co/6Y7fv9d/img-2.png" alt=""></li> <li class="art grid-item"> <img src="https://i.ibb.co/spfNjqS/img-8.png" alt=""></li> <li class="art grid-item"> <img src="https://i.ibb.co/D5djHJh/img-1.png" alt=""></li> <li class="theatre grid-item"> <img src="https://i.ibb.co/HDQpjKx/img-3.png" alt=""></li> <li class="music grid-item"> <img src="https://i.ibb.co/6Y7fv9d/img-2.png" alt=""></li> </ul> </div> </div> </div> </div> </section>

ul.tabs{ margin: 0px; padding: 0px; list-style: none; } ul.tabs li { cursor: pointer; width: 45%; padding:6px; display: inline-block; margin-bottom: 20px; border-radius: 50px; transition: 0.5s ease; box-shadow: 1px 1px 15px 1px #00000017; } ul.tabs li.active{ background: #217AF0; color: #fff; transition: 0.5s ease; box-shadow: 1px 1px 15px 1px #217af082; } .tab-content{ display: none; background: #ededed; padding: 15px; } .tab-content.current{ display: inherit; } .gallery-filter-box .grid{ /* display: flex; */ column-count: 4; column-gap:5px; } ul.tabs li span { font-weight: 550; padding-left: 10px; } .gallery-filter-box ul li { margin-bottom: 8px; } .gallery-filter-box ul li img { width: 95%; } .title-gallery h3 { font-size: 40px; font-weight: 600; } .title-gallery { margin-bottom: 40px; } .view-button { background: #FA1D49; color: #fff; padding: 10px 20px; text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: 0.5px; border-radius: 5px; box-shadow: 1px 1px 15px 1px #0003; } .filters.filter-button-group ul { margin-bottom: 2rem; }

$(document).ready( function() { $('.grid').isotope({ itemSelector: '.grid-item', }); // filter items on button click $('.filter-button-group').on( 'click', 'li', function() { var filterValue = $(this).attr('data-filter'); $('.grid').isotope({ filter: filterValue }); $('.filter-button-group li').removeClass('active'); $(this).addClass('active'); }); })